<template>
  <div class="wrapper">
        <div class="icons" v-show="show">
          <swiper :options="swiperOption">
            <swiper-slide v-for="(page, index) of pages" :key="index">
              <!--定义swiper-slide -->
              <div
                class="icon"
                v-for="item of page"
                :key="item.id"
              >
                <!--定义图标列表-->
                <div class='icon-img'>
                  <img class='icon-img-content' :src='item.imgUrl' />
                </div>
                <p class="icon-desc">{{item.desc}}</p>
              </div>
            </swiper-slide>
          </swiper>
        </div>
  </div>
</template>

<script>
  export default {
    name: 'HomeIcons',
    props: {
      list: Array
    },
    data () {
      return {
        swiperOption: {
          autoplay: false, //禁止自动滚动
        },
        show:false  //当页面加载完成后显示
      }
    },
    computed: {
      pages () {
        const pages = []//处理数据 将list大数组拆成每一维8个元素的2维数组，
        this.list.forEach((item, index) => {
          const page = Math.floor(index / 8)
          if (!pages[page]) {
            pages[page] = []
          }
          pages[page].push(item)
        })
        return pages
      }
    },
    mounted() {
      this.show=true //当组件加载完设置显示 用于修复 图片加载慢 导致的 样式难看
    }
  }
</script>

<style lang="stylus" scoped>
  @import '~@/assets/main.styl'
  .wrapper
    height: 0
    padding-bottom: 50%
    .icons >>> .swiper-container
      height: 0
      padding-bottom: 50%
    .icons
      margin-top: .1rem
      .icon
        position: relative
        overflow: hidden
        float: left
        width: 25%
        height: 0
        padding-bottom: 25%
        .icon-img
          position: absolute
          top: 0
          left: 0
          right: 0
          bottom: .44rem
          box-sizing: border-box
          padding: .1rem
          .icon-img-content
            display: block
            margin: 0 auto
            height: 100%
        .icon-desc
          position: absolute
          left: 0
          right: 0
          bottom: 0
          height: .44rem
          line-height: .44rem
          text-align: center
          color: $darkTextColor
          ellipsis()
</style>
